<template>
  <section class="pay-container" v-cloak>
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>缴费日期：</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围"
            :picker-options="dateOptions">
          </el-date-picker>
        </label>

        <!-- 
          根据产品要求去掉统计方式，默认选择渠道
          以后确定不要，根据关键字去掉相关代码
         -->
        <!-- <label for="" class="choose">
          <span>统计方式：</span>
          <el-select v-model="methodsType" placeholder="请选择" size="small" style="width:160px"  class="select-box">
            <el-option v-for="item in paymentMethodsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </label> -->
        
        <!-- <label for="" class="choose" v-if="methodsType===1">
          <span>班级:</span>
          <el-select v-model="classId" placeholder="请选择" size="small" style="width:160px"  class="select-box">
            <el-option v-for="item in classList" :key="item.value" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </label> -->
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="search">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="export">
      <div class="data-t">
        <span>总缴费笔数：{{ countInfo.payNum }}</span>
        <span style="margin-left: 18px;">总缴费金额：{{ countInfo.payAmount | currency }}元</span>
        <span style="margin-left: 18px;" v-if="isOtherShow">手续费总额：{{ countInfo.factorage | currency }}元</span>
        <span style="margin-left: 18px;" v-if="isOtherShow">总实收金额：{{ countInfo.realityPay | currency }}元</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row class="data-list">
      <ctable :thead="thead1" :table-data="lists1" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true" v-show="!isOtherShow"></ctable>
      <ctable :thead="thead2" :table-data="lists2" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true" v-show="isOtherShow"></ctable>
    </el-row>
  </section>
</template>

<script>
import {getDataList, getCountInfo, getDataListChannel, getCountInfoChannel} from 'api/school/settlement/index'
import {getClassList} from 'api/school/student/index'
import ctable from 'components/common/ctable'
import { getDayInitTime } from 'src/filter/index'
export default {
  data () {
    let startDate = new Date().getTime() - 7 * 24 * 3600 * 1000
    let endDate = new Date().getTime() - 24 * 3600 * 1000
    return {
      startTime: 0, // 开始时间
      endTime: 0, // 结束时间
      isOtherShow: false, // 是否显示通道数据
      dateTime: [new Date(startDate), new Date(endDate)], // 缴费日期
      lists1: [],
      lists2: [],
      thead1: [{ // 学校ctable组件头
        name: '支付日期',
        prop: 'paymentDate'
      }, {
        name: '班级名称',
        prop: 'className'
      }, {
        name: '缴费笔数',
        prop: 'payNum'
      }, {
        name: '缴费金额',
        prop: 'payAmount',
        format: this.priceFilter
      }], // 数据列表,
      thead2: [{ // 通道组件头
        name: '收费通道',
        prop: 'channelName'
      }, {
        name: '缴费笔数',
        prop: 'payNum'
      }, {
        name: '缴费金额',
        prop: 'payAmount',
        format: this.priceFilter
      }, {
        name: '通道费率',
        prop: 'rate',
        format: this.rateFilter
      }, {
        name: '手续费金额',
        prop: 'factorage',
        format: this.priceFilter2
      }, {
        name: '实收金额',
        prop: 'realityPay',
        format: this.priceFilter2
      }], // 数据列表,
      thead: [],
      options: [{
        name: '详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      classId: 0, // 选择年级
      gradeId: '', // 选择班级
      classList: [], // 班级列表
      countInfo: {}, // 统计信息
      methodsType: 2, // 统计方式
      paymentMethodsList: [
        {id: 1, name: '按班级'},
        {id: 2, name: '按收费通道'}
      ]
    }
  },
  created () {
    // this.getClass()
    this.getData(1)
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      if (this.methodsType === 1) { // 按班级查询
        this.isOtherShow = false
        // 获取统计信息
        getCountInfo({
          startTime: this.startTime,
          endTime: this.endTime,
          classId: this.classId
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getDataList({
          page: int,
          count: 15,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(res => {
          this.lists1 = res.data || []
          this.pageObj.page = res.page
        })
      } else if (this.methodsType === 2) { // 按通道
        this.isOtherShow = true
        // 获取统计信息
        getCountInfoChannel({
          startTime: this.startTime,
          endTime: this.endTime
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getDataListChannel({
          page: int,
          count: 15,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(res => {
          this.lists2 = res.data || []
          this.pageObj.page = res.page
        })
      }
    },
    getClass () { // 获取所有班级数据
      getClassList().then(v => {
        v.data.forEach(v => {
          v.children.forEach(val => {
            val.name = v.label + val.label
            this.classList.push(val)
          })
        })
        this.classList.unshift({id: 0, name: '全部'})
      })
    },
    toDetail (obj) {
      let o = {startTime: this.startTime, endTime: this.endTime}
      if (this.methodsType === 1) { // 按班级
        o.classId = obj.classId
        o.className = obj.className
      } else { // 按通道
        o.channelId = obj.channelId
        o.channelName = obj.channelName
      }
      this.$router.push({name: 'settlementDetail', query: o})
    },
    priceFilter (row, col, value) {
      return (value / 100).toFixed(2)
    },
    priceFilter2 (row, col, value) {
      return value / 100
    },
    rateFilter (row, col, value) {
      return (value * 100) + '%'
    },
    search () {
      this.getData(1)
    },
    exportData () {
      let loginKey = window.localStorage.loginKey
      window.open(`/net/schooladmin/school-order/exports-statement?startTime=${this.startTime}&endTime=${this.endTime}&login-key=${loginKey}`)
    }
  }
}
</script>
<style lang="less" scoped>
.pay-container {
  padding: 15px 25px 0;
  .data-t {
    color: #20a0ff;
  }
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .export {
    margin-top: 10px;
  }
}
</style>

